<template>
  <div class="container">
    <div class="box" v-if="data.length > 0">
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[0]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[0]?.jcsum }}</div>
          <div>不合格数量 {{ data[0]?.bhgsum }}</div>
        </div>
      </div>
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[1]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[1]?.jcsum }}</div>
          <div>不合格数量 {{ data[1]?.bhgsum }}</div>
        </div>
      </div>
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[2]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[2]?.jcsum }}</div>
          <div>不合格数量 {{ data[2]?.bhgsum }}</div>
        </div>
      </div>
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[3]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[3]?.jcsum }}</div>
          <div>不合格数量 {{ data[3]?.bhgsum }}</div>
        </div>
      </div>
    </div>
    <div class="box" v-if="data.length > 0">
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[4]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[4]?.jcsum }}</div>
          <div>不合格数量 {{ data[4]?.bhgsum }}</div>
        </div>
      </div>
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[5]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[5]?.jcsum }}</div>
          <div>不合格数量 {{ data[5]?.bhgsum }}</div>
        </div>
      </div>
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[6]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[6]?.jcsum }}</div>
          <div>不合格数量 {{ data[6]?.bhgsum }}</div>
        </div>
      </div>
      <div class="item">
        <div class="chart">
          <Item7 :obj="data[7]"></Item7>
        </div>
        <div class="content">
          <div>抽检量 {{ data[7]?.jcsum }}</div>
          <div>不合格数量 {{ data[7]?.bhgsum }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDYNCPByPFMarket, getSYNCPByMarketATy } from "../../util/home";
import Item7 from "./item7.vue";
export default {
  name: "",
  components: { Item7 },
  mixins: [],
  props: {},
  data() {
    return {
      option1: null,
      option2: {},
      data: [],
    };
  },
  inject: ["currentMarketId"],
  computed: {},
  watch: {},
  created() {
    // this.getInit();
  },
  methods: {
    getInit() {
      this.data = [];
      getSYNCPByMarketATy({ marketId: this.currentMarketId() }).then((res) => {
        this.data = res.data.data;
        this.option1 = this.data[0];
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;

  .box {
    height: 50%;
    display: flex;

    .item {
      // border: 1px solid #bfa;
      height: 100%;
      flex: 1;

      .chart {
        height: 65%;
      }

      .content {
        height: 30%;

        div {
          font-size: 12px;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
}
</style>
